<template>
  <div>
    <div class="list" v-for="(item, index) in list" :key="index">
      <div class="box">
        <span class="iconfont">&#xe66b;</span>
        {{ item.title }}
      </div>
      <div class="child" v-if="item.children">
          <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailList",
  props: {
    list: Array,
  },
};
</script>

<style scoped>
.box {
  padding: 0 0.2rem;
  height: 0.8rem;
  line-height: 0.8rem;
}
.iconfont{
    color: rgb(7, 172, 248);
}.child{
    padding: 0 .4rem;
}
</style>